import React from "react";
import './Flower.css';
import List from './List'

import { Component } from 'react'

export default class Flower extends Component {
    constructor() {
        super();
        this.getData = this.getData.bind(this);
    }
    state = { list: [], list2: [], title: '鲜花列表' }
    getData() {
        this.setState({ title: '花' })
    }

    componentDidMount() {
        fetch('https://www.fastmock.site/mock/3c02a69b3952632e311022710cb48a6c/plant/getPlants')
            .then(res => res.json())
            .then(res => {
                res.result.plantList.forEach((e) => {
                    e['flag'] = '收藏';
                })
                console.log(res.result.plantList);
                this.setState({ list: res.result.plantList })
            })
    }
    //收藏函数
    addItem = (n, item) => {
        if (item.flag == '收藏') {
            // console.log(e);
            let arr = [{ name: n, time: Date.now() }, ...this.state.list2]
            console.log(item)
            item.flag = '已收藏';


            this.setState({
                list2: arr
            })
        } else {
            console.log(item.flag);
        }


        // if(e.isSelected = true){
        //     e.innerHTML = "收藏"
        // }
        // else{
        //     e.innerHTML = "已收藏"
        // }
    }

    //取消收藏函数
    delItem = (i) => {
        let n = this.state.list2.filter((item, index) => i == index)[0];
        console.log(n.name);
        this.state.list.filter((item, index) => item.name == n.name)[0].flag = '收藏';
        //console.log(this.state.list);
        let newList = this.state.list2.filter((item, index) => i != index);
        this.setState({ list2: newList, flag: true })


    }
    render() {
        const { list2 } = this.state;
        return (
            <div>
                <h2>收藏列表</h2>
                <List list={list2} delItem={this.delItem} />
                <h2>{this.state.title}</h2>
                <div className="list">
                    {
                        this.state.list.map(item => {
                            return <div key={item.plantID} className="box">
                                <img src={item.coverURL}></img>
                                <br />
                                <span>
                                    中文名：{item.name}
                                </span>
                                <br />
                                <span>
                                    英文名：{item.engName}
                                </span>
                                <br />
                                <span>
                                    主要生存地带：{item.area || '未知产地'}
                                </span>
                                <br />
                                <button id="btn" onClick={(e) => this.addItem(item.name, item)}>{item.flag}</button>
                            </div>

                        })
                    }

                </div>
            </div>
        )
    }
}



//  export default Demo;